<template>
	<div class="index">
       <el-table
	      :data="DriverBody"
	      style="width: 100%"
	      max-height="760"
	      border
	      >   
	      <el-table-column
		        label="全选"
		        width="50"
		        fixed
		   >
		        <template slot-scope="scope">
			        <el-checkbox
			          type="text"
			        >
			        </el-checkbox>
			    </template>
		  </el-table-column>
	      <el-table-column 
		        type="index"
		        label="序号"
		        width="50"
		        fixed
		    >
		  </el-table-column>
		      <el-table-column
		        prop="driverName"
		        label="司机姓名"
		        min-width="80"
		        >
		      </el-table-column>
		      <el-table-column
		        prop="phone"
		        label="手机号"
		        min-width="110"
		        >
		      </el-table-column>
		      <el-table-column
		        prop="plateNumber"
		        label="已指派车辆"
						min-width="100"
		        >
		      </el-table-column>
		      <el-table-column
			      prop="companyName"
			      label="组织机构"
				  min-width="100"

				  :filters="optionsss"
				  :filter-method="filterTag"
			       filter-placement="bottom-end"
			   >
			   	 <template slot-scope="scope">
			        <el-tag
			          disable-transitions>
			          {{scope.row.companyName}}
			        </el-tag>
			      </template>
			   </el-table-column>
			   <el-table-column
			      prop="idCardNo"
			      label="身份证号"
				  	min-width="170"
			   >
			   </el-table-column>
			   <el-table-column
			      prop="userName"
			      label="创建人"
				 	  min-width="100"
			   >
			   </el-table-column>
			   <el-table-column
			      prop="createdTime"
			      label="创建时间"
				  	min-width="160"
			   >
			   </el-table-column>
			   <el-table-column
			      label="操作"
			      min-width="100"
			   >
			      <template slot-scope="scope">
			        <el-button
			          @click.native.prevent="deleteRow(scope.$index, DriverBody)"
			          type="text"
			          size="small">
			                      移除
			        </el-button>
			        <el-button
			          @click.native.prevent="redactRow(scope.$index, DriverBody)"
			          type="text"
			          size="small">
			                    编辑
			        </el-button>
			      </template>
			    </el-table-column>
		</el-table>
		<div class="buttom">
			<el-pagination
			background
			:page-size="15"
			:current-page="currentPage"
			@current-change="handleCurrentChange"
			layout="total, prev, pager, next"
		    :total="bottom">
			</el-pagination>
		</div>
		<div class="DriverBody" v-show="Vshow">
	  	 <div class="DriverSJ">修改司机信息</div>
		 		<div class="DriverMess" v-show="Bshow">
			  <span class="title">司机姓名 :</span>
				 	<el-input
					    placeholder="请输入司机姓名"
						v-model="inputadd.driverName"
						autocomplete="off"
						clearable
					>
			        </el-input>
			  <span class="title">手机号:</span>
				 	<el-input
					    placeholder="请输入手机号"
						v-model="inputadd.phone"
						autocomplete="off"
						clearable
					>
			        </el-input>
			  <span class="title">身份证号码:</span>
				 	<el-input
					    placeholder="请输入身份证号码"
						v-model="inputadd.idCardNo"
						autocomplete="off"
						clearable
					>
			        </el-input>
			  <div style="margin-top:.5rem">
			  <el-row :gutter="20">
			    <el-col :span="4">
				<span class="title" style="line-height:1.8rem">身份证图片:</span>
				</el-col>
					<el-col :span="20">
					<el-upload
						action="http://192.168.0.108:9001/file/upload"
						list-type="picture-card"
						:limit="2"
						name="file"
						:on-exceed="onExceed"
						:file-list="fileList1"
						:before-upload="beforeUpload"
						:on-preview="handlePictureCardPreview"
						:on-success="handleAvatarSuccess1"
						:on-remove="handleRemove">
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
					</el-col>
				</el-row>
			  </div>
			  <div style="margin-top:.5rem">
			  	<span class="title">驾驶证号码:</span>
				 	<el-input
					    placeholder="请输入驾驶证号码"
						v-model="inputadd.drivingLicense"
						autocomplete="off"
						clearable
					>
			        </el-input>
				<span class="title">组织机构:</span>
				 	<el-select v-model="inputadd.companyId" placeholder="中永物流" >
						<el-option
						v-for="item in options"
						:key="item.id"
						:label="item.companyName"
						:value="item.id">
						</el-option>
					</el-select>
			  </div>
			  <div style="margin-top:.5rem">
			  <el-row :gutter="20">
			   <el-col :span="4">
				<span class="title" style="line-height:1.8rem">驾驶证图片:</span>
				</el-col>
				<el-col :span="20">
					<el-upload
						action="http://192.168.0.108:9001/file/upload"
						list-type="picture-card"
						:limit="2"
						name="file"
						:on-exceed="onExceed"
						:file-list="fileList2"
						:before-upload="beforeUpload"
						:on-preview="handlePictureCardPreview"
						:on-success="handleAvatarSuccess2"
						:on-remove="handleRemove">
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
					</el-col>
				</el-row>
			  </div>
			  <div style="margin-top:.5rem">
			  	<span class="title" style="line-height:1rem">备注:</span>
				 	<el-input
					 	type="textarea"
						:rows="2"
					    placeholder="备注"
						v-model="inputadd.remark"
						autocomplete="off"
						clearable
					>
			        </el-input>
			  </div>
			  <el-row class="DriverRow">
			  	 <el-button class="DriverCol" type="primary" @click="cancel">取消</el-button>
				 <el-button class="DriverCol" type="primary" @click="next">下一步</el-button>
			  </el-row>
		 </div>
		 <div class="DriverBess" v-show="Dshow">
		 	<div class="spancar">已绑定车辆</div>
		 	<el-table
				:data="tableData4"
				height="300"
				border
				style="width: 100%"
				
				>
				<el-table-column
		        label="全选"
		        width="50"
		        fixed
		   >
		        <template slot-scope="scope" >
			        <el-checkbox
			          type="text"
			        >
			        </el-checkbox>
			    </template>
		  		</el-table-column>
				<el-table-column
				prop="plateNumber"
				label="车牌号">
				</el-table-column>
				<el-table-column
				prop="carLength"
				label="车长">
				</el-table-column>
				<el-table-column
				prop="typeName"
				label="车型">
				</el-table-column>
				<el-table-column
				prop="carVolume"
				label="体积">
				</el-table-column>
				<el-table-column
				prop="cardBoard"
				label="板数">
				</el-table-column>
				<el-table-column
				prop="carLoad"
				label="载重">
				</el-table-column>
				<el-table-column
				prop="companyName"
				label="组织机构"
				width="120">
				</el-table-column>
				<el-table-column
			      label="操作"
			      min-width="60"
			   >
				<template slot-scope="scope">
			        <el-button
			          @click.native.prevent="updateRow(scope.$index, tableData4)"
			          type="text"
			          size="small">
			                   更换
			    	</el-button>
				</template>
				</el-table-column>
			</el-table>
			  <el-row class="DriverRow">
			  	 <el-button class="DriverCol" type="primary" @click="cancel">取消</el-button>
				 <el-button class="DriverCol" type="primary" @click="getBack">返回</el-button>
				 <el-button class="DriverCol" type="primary" @click="create">提交</el-button>
			  </el-row>
		 </div>
	  </div>
	</div>
</template>

<script>
import {debounce} from '@/common/commons.js'
import { mapState,mapMutations } from 'vuex'
export default {
	name:"DriverBody",
	props:{
		DriverBody:Array,
		bottom:Number
	},
	data(){
		return{
			dialogImageUrl: '',
      		dialogVisible: false,
			fileList1: [], //身份证图片显示列表
			fileList2: [],//驾驶证图片显示列表
			Bshow: true, //填写司机信息窗口
			Dshow: false, //绑定车辆窗口
			Vshow: false, //新增窗口
			currentPage: 1,
			optionss: null, //默认组织机构
			options:[], //组织机构列表(修改)
			optionsss:[], //列表显示组织结构
			src: null, //预删除图片
			inputadd:{
				driverName: "", //司机姓名
				phone: "", //手机号
				companyId: "", //组织机构
				idCardNo: "", //身份证号码
				idCardImg: "", //身份证图片;
				drivingLicense: "", //驾驶证号码		
				drivingLicenseImg: "",//驾驶证图片
				state: "", //状态
				userName: "", //创建人
				remark: "", //备注
				carId: "", //车辆
				id: "", //司机id
			},
			tableData4: [{}],
		}
	},
	methods: {
		//组织机构显示
	  filterTag(value, row) {
		  value=value+""
        return row.companyId === value;
      },
		//是否删除
		deleteRow(index,rows) {
            const _this = this
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
			  confirmButtonText: '确定',
			  cancelButtonText: '取消',
			  type: 'warning'
			}).then(() => {
			  this.CompanyDelete(index,rows)
			  this.$message({
			  type: 'success',
			  message: '删除成功!'
			});
			rows.splice(index, 1);
			}).catch(() => {
			   this.$message({
			     type: 'info',
			     message: '已取消删除'
			   })        
			})
		},
		//删除
		CompanyDelete(index,rows){
			let qs = require('qs')
			this.axios.post(`${this.baseURL}/driver/delete`,
				qs.stringify({
					id:rows[index].id
				})
				).then(res=>{
			})
		},
		//更换车辆
		updateRow(){
			console.log("123")
		},
		//修改/编辑
		redactRow(index,rows){
			const _this=this
			this.Vshow=!this.Vshow
			const row1=rows[index].idCardImg
			console.log(_this.inputadd.idCardImg)
			if(row1){
			const lor1=row1.split(";");
			for(var i=0;i<lor1.length;i++){
				if(lor1[i]!="undefined"){
					if(lor1[i]!=""){
					this.fileList1.push({url:lor1[i]})}
				}
			}
			}
			const row2=rows[index].drivingLicenseImg
			if(row2){
			const lor2=row2.split(";");
			for(var i=0;i<lor2.length;i++){
				if(lor2[i]!="undefined"){
					if(lor2[i]!=""){
					this.fileList2.push({url:lor2[i]})}
				}
			}
			}
			this.inputadd=rows[index]
			//this.inputadd.idCardImg={}
			this.option()
			
			//_this.inputadd.carId=rows[index].id;	
			this.axios.get(`${this.baseURL}/car/findByDriverId`,{
				params:{
					driverId:_this.inputadd.id
				}
			}).then(res=>{
				if(res.data.data!=null){		
				_this.tableData4.push(res.data.data)
				_this.inputadd.carId=res.data.data.id
				}
			})
		},
		//请求组织机构
		option(){
			const _this=this
			this.axios.get(`${this.baseURL}/company/findAll`,{
				params:{
				}
			}
			).then(res=>{
				var data=res.data.data
				_this.options=data
				for(var i=0;i<_this.options.length;i++){
				if(_this.options[i].id==_this.inputadd.companyId){
					_this.optionss=_this.options[i].companyName
				};
				var newdata = JSON.parse(JSON.stringify(data).replace(/companyName/g,"text"))
				var newdatas   = JSON.parse(JSON.stringify(newdata).replace(/id/g,"value"))
		      	_this.optionsss  = newdatas
			}
			})
		},
		//图片删除
		handleRemoves(){ 
			const _this=this
			let qs=require("qs");
			this.axios.post(`${this.baseURL}/file/deleteUpload`,
				qs.stringify({urlPath:_this.src})
			).then(res=>{
				const idcid=_this.inputadd.idCardImg
				const lor1=idcid.split(";");
				for(var i=0;i<lor1.length;i++){
					if(lor1[i]==_this.src){
						lor1[i]="undefined"
					}
				}
				for(var j=0;j<lor1.length;j++){
					var a=""
					a+=(";"+lor1[j])
				}
				_this.inputadd.idCardImg=a
				console.log(_this.inputadd.idCardImg)
				const idLid=_this.inputadd.drivingLicenseImg
				const lor2=idLid.split(";");
				for(var i=0;i<lor2.length;i++){
					if(lor2[i]==_this.src){
						lor2[i]="undefined"
					}
				}
				for(var j=0;j<lor2.length;j++){
					var b=""
					b+=(";"+lor2[j])
					console.log(b)
				}
				_this.inputadd.idCardImg=b
      		})
		},
		handleRemove(file, fileList) {
        	const _this=this
			_this.src+=file.url

		},
		//查看大图
		handlePictureCardPreview(file) {
        	this.dialogImageUrl = file.url;
        	this.dialogVisible = true;
      	},
		//上传成功(身份证图片)
		handleAvatarSuccess1(res, file){
			//console.log(res.data);
			this.inputadd.idCardImg+=(';'+res.data)
		},
		//上传成功(驾驶证图片)
		handleAvatarSuccess2(res, file){
			//console.log(res.data);
			this.inputadd.drivingLicenseImg+=(';'+res.data)
		},
		//取消
		cancel(){
			this.Vshow=!this.Vshow;
			this.Bshow=true;
			this.Dshow=false;
			this.fileList1=[];
			this.fileList2=[];
			this.tableData4=[]
			this.src=null
		},
		//下一步
		next(){
			this.Bshow=false,
			this.Dshow=true
		},
		//返回
		getBack(){
			this.Bshow=true,
			this.Dshow=false
		},
		//当前页
		handleCurrentChange(curPage){
			//this.currentPage=curPage
			//console.log(curPage);
			this.$emit('addDriverBody',curPage)
		},
		//提交
		create(){
			const _this=this
			let qs=require("qs");
			delete _this.inputadd.plateNumber
			delete _this.inputadd.companyName
			delete _this.inputadd.createdTime
			delete _this.inputadd.modifiedTime
			console.log(_this.inputadd);
			 this.axios.post(`${this.baseURL}/driver/update`,
				 qs.stringify(_this.inputadd)
			 ).then(res=>{
				 if(res.data.status){
					this.$message({
						type: 'success',
						message: '修改成功!'
					});
					this.changeisRouter(false)
						this.$nextTick(function(){
						this.changeisRouter(true) 
					})
				 };
			})
		},
		...mapMutations(['changeisRouter']),
		//上传图片的个数
		onExceed(files, fileList) {
            this.$message.error("上传图片不能超过2张");
        },
		//文件上传前的前的钩子函数
        //参数是上传的文件，若返回false，或返回Primary且被reject，则停止上传
        beforeUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isGIF = file.type === 'image/gif';
            const isPNG = file.type === 'image/png';
            const isBMP = file.type === 'image/bmp';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG && !isGIF && !isPNG && !isBMP) {
                this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 2MB!');
            }
            return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
        },
	},
	computed: {
		 ...mapState(['isRouterAlive'])
	},
	mounted() {
		this.option()	
	},
	// created:function(){
	// 	this.createAll();
	// }
}
</script>

<style scoped>
    .index >>> .el-table td,.index  >>> .el-table th {
		text-align: center;
	}
	.index .DriverBody{
		width:10rem;
		border-radius: 0.2rem;
		min-width:800px;
		z-index: 11111;
		position:absolute;
		top:5%;
		left:50%;
		transform: translate(-50%,0);
        overflow: hidden;
		box-shadow: 0 0 0.5rem #cac6c6;
	}
	.index .DriverBody .DriverSJ{
		width:100%;
		border: .02rem solid #eaeaea;
		background:#20A0FF;
		position:relative;
		text-align: center;
		line-height: .8rem;
		color:#fff;
		font-size: 0.34rem;
		font-weight: bold
	}
	.index .DriverBody .DriverMess{
		padding-top:.2rem;
		background-color:#fff;
		border: .02rem solid #eaeaea;
	}
	.index .DriverBody .DriverMess .title{
		margin-left:.2rem
	}
	.index .DriverBody .DriverMess >>> .el-textarea{
		width:50%
	}
	.index .DriverBody .DriverMess >>> .el-input{
		width:23%;
	}
	.index .DriverBody .DriverMess >>> .el-select .el-input{
		width:100%
	}
	.index .DriverBody .DriverMess >>> .el-select .el-input__icon{
		line-height:.7rem
	}
	.index .DriverBody .DriverMess >>> .el-input__inner{
		display:left;
		height:.6rem;
		width:100%
	}
	.index .DriverBody .DriverMess >>> .el-upload--picture-card{ 
		line-height:0;
		width:2rem;
		height:2rem
	}
	.index .DriverBody .DriverMess >>> .el-upload--picture-card i{
		line-height:2rem;
	}
	.index .DriverBody .DriverMess >>> .el-upload-list--picture-card .el-upload-list__item-actions{
		width:2rem;
		height:2rem;
	}
	.index .DriverBody .DriverMess >>> .el-upload-list__item{
		width:2rem;
		height:2rem
	}
	.index .DriverBody .DriverRow{
		text-align:center;
	}
	.index .DriverBody .DriverCol{
		width:2rem;
		margin:.2rem
	}
	.index .DriverBody .DriverBess{
		padding:.2rem;
		background-color:#fff;
		box-shadow: 0 0 0.5rem #cac6c6;
		border: .02rem solid #eaeaea;
	}
	.index .DriverBody .DriverBess .spancar{
		margin:.2rem .1rem;
		font-size:.4rem; 
		color:#ccc
	}
	.index .buttom{
		text-align:center;
		padding-top:.3rem
	}
</style>